import React from 'react';
import {Router, Route, Link} from 'react-router';
import utils from '../../js/utils';
import config from '../../../config/config';

class Left extends React.Component {
  constructor () {
    super();
    this.state = {

    }

    this.showNextUl = this.showNextUl.bind(this);
    this.checkUlshow = this.checkUlshow.bind(this);
  }

  componentDidMount () {

  }

  showNextUl (event) {
    let ele = event.target || event.srcElement;
    let $ul = $(ele).parent('h3').next('ul');
    let $i = $(ele).children('i');

    let display = $ul.css('display');
    if (display == "block") {
      $ul.hide(200);
      $i.eq($i.length - 1).removeClass('fa-angle-down').addClass('fa-angle-up');
    } else {
      $ul.show(200);
      $i.eq($i.length - 1).removeClass('fa-angle-up').addClass('fa-angle-down');
    }
  }

  checkUlshow (sub_menu) {
    for (let i = 0, len = sub_menu.length; i < len; i++) {
      if (window.location.hash.split('#')[1].indexOf(sub_menu[i].router) != -1) {
        return true
      }

      if (window.location.hash.split('#')[1] == "/zuopin/articles/new/1/1" || window.location.hash.split('#')[1].indexOf("/zuopin/articles/modify/1/1") != -1) {
        return true
      }
    }
    return false
  }

  render () {

    let showNextUl = this.showNextUl;
    let checkUlshow = this.checkUlshow;

    return (
      <div className='bamboo-left'>
        {/*
          <div className='bamboo-left-logo'>
            { config.app.web_logo != "" && <img src={config.app.web_logo} /> }
            { config.app.web_name != "" && <span>{config.app.web_name}</span> }
          </div>
        */}
        <div className='bamboo-left-menu'>
          {
            config.app.menu.map(function (item, idx) {
              let sub_menu = item.sub_menu;
              return <div key={idx}>

                <h3>
                  {
                    item.router == "" ?
                    <a href="javascript:void(0)" onClick={item.sub_menu.length > 0 && showNextUl} className={item.router != "" && window.location.hash.split('#')[1] == item.router ? "click" : ""}>
                      {item.icon_font != "" && <i className={item.icon_font}></i>}
                      {item.name}
                      {item.sub_menu.length > 0 && <i className='fa fa-angle-up'></i>}
                    </a> :
                    <Link onClick={item.sub_menu.length > 0 ? showNextUl : null} className={item.router != "" && window.location.hash.split('#')[1] == item.router ? "click" : ""} to={item.router}>
                      {item.icon_font != "" && <i className={item.icon_font}></i>}
                      {item.name}
                      {item.sub_menu.length > 0 && <i className='fa fa-angle-up'></i>}
                    </Link>
                  }
                </h3>

                {
                  sub_menu.length > 0 &&
                  <ul style={{display: checkUlshow(sub_menu) ? "block" : "none"}}>
                    {
                      sub_menu.map(function (it, ix) {
                        return <li key={ix}><Link className={
                            it.router != "" && (window.location.hash.split('#')[1].indexOf(it.router) != -1) ? "click" :

                            (window.location.hash.split('#')[1] == "/zuopin/articles/new/1/1" || window.location.hash.split('#')[1].indexOf("/zuopin/articles/modify/1/1") != -1) && it.router.indexOf("/zuopin") != -1 ? "click" :
                            ""
                          } to={it.router}>{it.name}</Link></li>
                      })
                    }
                  </ul>
                }
              </div>
            })
          }
        </div>
      </div>
    )
  }
}

export default Left;
